<template>
  <view class="container yh_flex_y">
    <view class="top">
      <image src="../../static/images/logo.png" class="logo" />
    </view>
    <view class="content">
      <!-- 左侧导航 -->
      <view class="menu">
        <view
          class="menu_inner"
          v-for="item in prize"
          :key="item.id"
          @click="togglePrize(item.id)"
        >{{item.name}}</view>
      </view>
     <!-- 右侧奖品动画 -->
      <lottery-turntable ref="turntable" @getIndex="getIndex" v-if="prizeType==1"></lottery-turntable>
      <lottery-nine ref="nine" @getIndex="getNineIndex" v-if="prizeType==2"></lottery-nine>
      <lottery-tiger ref="tiger" @getIndex="getTigerIndex" v-if="prizeType==3"></lottery-tiger>
      <view class="cap_main" v-show="prizeType==4">
        <div class="bg">
          <div class="lotterybg">
            <canvas id="myCanvas" canvas-id="myCanvas" style="width: 285px; height: 170px;"></canvas>
          </div>
        </div>
        <image
          src="https://file02.esurl.cn/public/eggMachine/start-btn.png"
          class="start"
          @click="play()"
        />
      </view>
       <lottery-redbag ref="redbag" @getIndex="openBag" v-if="prizeType==5" />
       
      <lottery-flop  v-if="prizeType==6" />
      <!-- 娃娃机 -->
       <lotter-dollmachine ref="dollMachine" @getIndex="catchDoll" v-if="prizeType==7" />
    </view>

    <view class="foot yh_flex_x">
      <button class="btn_explain" hover-class="none"></button>
      <button class="btn_record" hover-class="none"></button>
    </view>
    <div>
    </div>
  </view>
</template>

<script src="./control.js"></script>

<style lang="scss" src="./style.scss" scoped>
</style>
